HTML

<section class="hp-hero js-hp-hero hp-hero--large" role='banner' aria-label="main hero image">
            
                <div class="hp-hero__data js-hero-data">
                    <div class="hp-hero__data-option" data-hero-image-lg="/images/temp/hero-(1)-lg.jpg" data-hero-image-md="/images/temp/hero-1-md.jpg"
                        data-hero-image-sm="/images/temp/hero-1-sm.jpg" data-hero-h1="Be a part of something greater." data-hero-h2=""
                        data-hero-link="mastersub-system.html" data-hero-target="">
                    </div>
                    <div class="hp-hero__data-option" data-hero-image-lg="/images/temp/hero-(1)-lg.jpg" data-hero-image-md="/images/temp/hero-1-md.jpg"
                        data-hero-image-sm="/images/temp/hero-1-sm.jpg" data-hero-h1="Be a part of something greater." data-hero-h2="Text that references a patient success story goes here and can be a couple of lines long"
                        data-hero-link="mastersub-system.html" data-hero-target="_blank">
                    </div>
                </div>
            
                <div class="hp-hero__bg-container js-hero-image-container">
                    <div class="hp-hero__bg hp-hero__bg--lg u-hidden-mq-sm u-hidden-mq-md js-hero-image-lg">
                        <img src="/images/temp/hero-(1)-lg.jpg" alt="Hero background image" fetchpriority="high" class="hp-hero__bg-image">
                    </div>
                    <div class="hp-hero__bg hp-hero__bg--md u-hidden-mq-sm u-hidden-mq-lg js-hero-image-md">
                        <img src="/images/temp/hero-1-md.jpg" alt="Hero background image" fetchpriority="high" class="hp-hero__bg-image">
                    </div>
                    <div class="hp-hero__bg hp-hero__bg--sm u-hidden-mq-md u-hidden-mq-lg js-hero-image-sm">
                        <img src="/images/temp/hero-1-sm.jpg" alt="Hero background image" fetchpriority="high" class="hp-hero__bg-image">
                    </div>
                    <div class="hp-hero__bg hp-hero__bg--lg u-hidden-mq-sm u-hidden-mq-md js-hero-image-lg">
                        <img src="/images/temp/hero-(1)-lg.jpg" alt="Hero background image" fetchpriority="high" class="hp-hero__bg-image">
                    </div>
                    <div class="hp-hero__bg hp-hero__bg--md u-hidden-mq-sm u-hidden-mq-lg js-hero-image-md">
                        <img src="/images/temp/hero-1-md.jpg" alt="Hero background image" fetchpriority="high" class="hp-hero__bg-image">
                    </div>
                    <div class="hp-hero__bg hp-hero__bg--sm u-hidden-mq-md u-hidden-mq-lg js-hero-image-sm">
                        <img src="/images/temp/hero-1-sm.jpg" alt="Hero background image" fetchpriority="high" class="hp-hero__bg-image">
                    </div>
                </div>
            
                <a href="#" class="hp-hero__link js-hero-link">
                    <div class="l-contain hp-hero__heading-wrap js-hero-heading-wrap">
                        <h1 class="hp-hero__heading js-hero-h1"></h1>
                        <span class="hp-hero__subheading js-hero-h2"></span>
                    </div>
                </a>
            
                <div class="hp-hero__cta">
                    <div class="hp-hero__cta-contain">
                        <a class="hp-hero__cta-item-wrap" href="find-a-doctor-landing.html">
                            <div class="hp-hero__cta-item icon-doctor-yellow">
                                <div class="hp-hero__cta-border hp-hero__cta-border--r"></div>
                                <div class="hp-hero__cta-border hp-hero__cta-border--b"></div>
                                <div class="hp-hero__cta-item-text">Find A Doctor</div>
                            </div>
                        </a>
                        <a class="hp-hero__cta-item-wrap" href="locations-landing.html">
                            <div class="hp-hero__cta-item icon-location-yellow">
                                <div class="hp-hero__cta-border hp-hero__cta-border--r"></div>
                                <div class="hp-hero__cta-border hp-hero__cta-border--b"></div>
                                <div class="hp-hero__cta-item-text">Locations</div>
                            </div>
                        </a>
                        <a class="hp-hero__cta-item-wrap" href="mastersub-entity.html">
                            <div class="hp-hero__cta-item icon-patient-yellow">
                                <div class="hp-hero__cta-border hp-hero__cta-border--r"></div>
                                <div class="hp-hero__cta-item-text">Patient Portal</div>
                            </div>
                        </a>
                        <a class="hp-hero__cta-item-wrap" href="mastersub-entity.html">
                            <div class="hp-hero__cta-item icon-medical-yellow">
                                <div class="hp-hero__cta-border hp-hero__cta-border--r"></div>
                                <div class="hp-hero__cta-item-text">Jobs</div>
                            </div>
                        </a>
                    </div>
                </div>
            
            </section> <!-- .hp-hero -->